<template>
  <van-overlay :show="isShow"  :lock-scroll="false" :z-index="1001">
    <div ref="generateImg" class="poster">
      <!-- <img class="title_icon" :src="require('@/assets/image/title_icon.png')" /> -->
      <div class="title_icon">魔镜魔镜告诉我</div>
      <p class="title mb-110">{{ title }}</p>
      <!-- <img class="avatar" :src="userInfo.avatar" />
      <p class="nick_name">{{ userName }}</p> -->
      <img class="cont_icon" src="../../assets/cont_icon.png" alt="">
      <img class="cont_icon1" src="../../assets/cont_icon1.png" alt="">
      <div class="cont">{{ content.length > 315 ? `${content.slice(0, 315)}...` : `${content}` }}</div>
    </div>
    <div v-if="posterImg" class="mask pr pt-30">
      <img class="close" @click="$emit('update:isShow', false)" src='https://content.daylucky.cn/admin/image/pg09q2cg551irdq5847ufixb.png' />
      <img class="posterImg" :src="posterImg" alt="">
      <p class="tips mt-10">长按保存图片</p>
		</div>
  </van-overlay>
</template>
<script>
import { showToast, Overlay } from 'vant';
import { saveStorage, loadStorage } from '@/utils/cache'
import { useStore } from '@/store/index';
import { storeToRefs } from "pinia";
const store = useStore();
const { userInfo } = storeToRefs(store)
console.log(userInfo, 'userInfouserInfo')
import html2canvas from "html2canvas";
export default {
  components: {
    [Overlay.name]: Overlay
  },
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    owned: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    }
  },
  watch: {
    isShow: {
      handler(n) {
        if (n) {
          this.$nextTick(() => {
            this.getPoster()
          })
        }
      },
      immediate: true
    },
    owned: {
      handler(n) {
        if (n) {
        //  this.userName = loadStorage('self_nick_name')
        } else {
        //  this.userName = loadStorage('other_nick_name')
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      userInfo,
      // userName: '',
      posterImg: '',
      loading: null
    }
  },
  methods: {
    getPoster() {
      //  showToast("正在生成...");
      this.$nextTick(() => {
        this.createPoster();
      })
    },
    createPoster() {
      // 生成海报
      const domObj = this.$refs.generateImg;
      html2canvas(domObj, {
        useCORS: true,
        allowTaint: false,
        async: true,
        // scale: 2,
        dpi: 300,
        logging: false,
        letterRendering: true
      })
        .then(canvas => {
          // 在微信里,可长按保存或转发
          // this.isShowPoster = true;
          this.$nextTick(() => {
            this.posterImg = canvas.toDataURL("image/png");
            // this.loading.clear();
            // this.isShowImg = true
            console.log(this.isShow, '123123')
          });
        })
        .catch(e => {
          console.log("err", e);
        });
      }
  }
}
</script>
<style lang="scss" scoped>
.poster {
  background: url('../../assets/poster_bg.png') no-repeat left top/ cover;
  width: 370px;
  height: 790px;
  padding-top: 42px;
  position: absolute;
  left: 1000px;
  top: 1000px;
  .title_icon {
    font-family:'WDCH-Regular, WDCH';
    // font-weight: 400;
    font-size: 33px;
    color: #FFFFFF;
    line-height: 43px;
    height: 43px;
    letter-spacing: 7px;
    text-align: center;
    margin-bottom: 11px;
  }
  .title {
    font-size: 24px;
    line-height: 31px;
    height: 31px;
    color: '#131A28';
    // font-weight: 400;
    font-family: 'WDCH-Regular, WDCH';
    text-align: center;
    margin-bottom: 23px;
  }
  .avatar {
    width: 72px;
    height: 72px;
    border-radius: 72px;
    display: block;
    margin: 0 auto;
  }
  .nick_name {
    // font-weight: 600;
    font-size: 20px;
    color: #131A28;
    line-height: 32px;
    height: 32px;
    text-align: center;
    font-style: normal;
    text-transform: none;
  }
  .cont_icon {
    position: absolute;
    top: 270px;
    top: 210px;
    left: 42px;
    width: 30px;
    height: 24px
  }
  .cont_icon1 {
    position: absolute;
    top: 654px;
    top: 674px;
    left: 298px;
    width: 30px;
    height: 24px
  }
  .cont {
    // width: 280px;
    // margin: 47px auto 0;
    padding: 0 30px 0 50px;
    font-size: 16px;
    line-height: 26px;
    // font-weight: 400;
  }
}
.tips {
  font-size: 14px;
  color: #fff;
  text-align: center;
}
.close {
  width: 32px;
  height: 32px;
  position: absolute;
  top: 10px;
  right: 5px;

}
.posterImg {
  width: 260px;
  display: block;
  margin: 0 auto;
  object-fit: cover;
}
</style>